<template>
  <div class="home-container">
    <div class="home-header">
      <h1>数据分析首页</h1>
    </div>
    <div class="home-content">
      <div class="chart-container">
        <div class="chart-card">
          <p class="chart-title">房源统计</p>
          <div class="chart" ref="houseChart"></div>
        </div>
        <div class="chart-card">
          <p class="chart-title">用户统计</p>
          <div class="chart" ref="userChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {houseStatistics} from "./homeJs";

export default {
  name: "Home",
  mounted() {
    this.initHouseChart();
    this.initUserChart();
  },
  methods: {
    initHouseChart() {
      // 获取数据
      houseStatistics().then(res => {
        if (res.code === '200') {
          // 房源获取成功

          // 转换数据格式
          let data = [
            { name: 'houseTotalNum', value: res.data.houseTotalNum },
            { name: 'leaseNum', value: res.data.leaseNum },
            { name: 'noLeaseNum', value: res.data.noLeaseNum },
            { name: 'disabledNum', value: res.data.disabledNum }
          ];

          // 初始化房源统计表
          let barChart = echarts.init(this.$refs.houseChart);
          barChart.setOption({
            xAxis: {
              type: 'category',
              data: ['houseTotalNum', 'leaseNum', 'noLeaseNum', 'disabledNum'],
              axisLabel: {
                formatter: function (value) {
                  switch (value) {
                    case 'houseTotalNum':
                      return '房源总数';
                    case 'leaseNum':
                      return '已出租';
                    case 'noLeaseNum':
                      return '未出租';
                    case 'disabledNum':
                      return '禁用数';
                    default:
                      return value;
                  }
                }
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data,
              type: 'bar',
              itemStyle: {
                color: '#409EFF'
              }
            }]
          });
        }
      })
    },
    initUserChart() {
      let barChart = echarts.init(this.$refs.userChart);
      barChart.setOption({
        xAxis: {
          type: 'category',
          data: ['总注册数']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [100, 200, 150, 250, 300, 200],
          type: 'bar',
          itemStyle: {
            color: '#67C23A'
          }
        }]
      });
    }
  }
}
</script>

<style>
.home-container {
  padding: 20px;
}

.home-header {
  text-align: center;
  margin-bottom: 20px;
}

.chart-container {
  display: flex;
  justify-content: space-around;
}

.chart-card {
  width: 45%;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.chart-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.chart {
  height: 300px;
}
</style>
